<!DOCTYPE html>
<html>
<head>
<title>Physics Blocks Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- General Styles ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineCap = 'round';

    // --- Draw Surface ---
    const surfaceY = 300;
    ctx.lineWidth = 6;
    ctx.beginPath();
    ctx.moveTo(0, surfaceY);
    ctx.lineTo(600, surfaceY);
    ctx.stroke();

    // --- Block Properties ---
    const blockHeight = 140;
    const blockTopY = surfaceY - blockHeight;

    // Block X
    const blockX_x = 210;
    const blockX_width = 110;

    // Block Y
    const blockY_x = blockX_x + blockX_width;
    const blockY_width = 180;

    // --- Draw Blocks ---
    ctx.lineWidth = 4;
    ctx.strokeRect(blockX_x, blockTopY, blockX_width, blockHeight);
    ctx.strokeRect(blockY_x, blockTopY, blockY_width, blockHeight);

    // --- Draw Text ---
    ctx.font = 'bold 32px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Block Labels
    ctx.fillText('X', blockX_x + blockX_width / 2, blockTopY - 25);
    ctx.fillText('Y', blockY_x + blockY_width / 2, blockTopY - 25);

    // Mass Labels
    ctx.font = 'bold 36px serif';
    ctx.fillText('6 kg', blockX_x + blockX_width / 2, blockTopY + blockHeight / 2);
    ctx.fillText('15 kg', blockY_x + blockY_width / 2, blockTopY + blockHeight / 2);

    // --- Draw Force Arrow ---
    const arrowY = blockTopY + blockHeight / 2;
    const arrowStartX = 70;
    const arrowEndX = blockX_x;
    const arrowHeadLength = 20;
    
    // Force Label
    ctx.fillText('35 N', arrowStartX - 5, arrowY - 45);

    // Arrow function
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        
        ctx.lineWidth = 4;
        ctx.beginPath();
        // Line
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        // Arrowhead
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // The image has the label `35N` above the arrow, so adjusting position.
    // Let's draw the arrow starting from a point after the label.
    const labelX = 60;
    const labelY = 230; // Vertical center
    ctx.font = 'bold 36px serif';
    ctx.textAlign = 'left';
    ctx.fillText('35 N', labelX, labelY);

    const newArrowStartX = labelX + ctx.measureText('35 N').width + 15;
    drawArrow(ctx, newArrowStartX, labelY, blockX_x, labelY, arrowHeadLength);


</script>
</body>
</html>